/**
 * AlignmentProperty module
 */
import editorWidget from "../../../actions/Editor/widgets";
import editorActions from "../../../actions/Editor/editor"
import {bindActionCreators} from 'redux';
import {connect} from 'dva';
import React, {Component} from 'react';

// var dataProvider = require('../provider/dataProvider');
// var historyProvider = require('../provider/historyProvider');
// var WidgetPropertyCommand = require("../command/WidgetPropertyCommand");
class AlignmentProperty extends Component {

    getEdgeWidget() {
        const {selectedWidgets}=this.props
        let widgets = [];
        for (var item in selectedWidgets) {
            let widget = selectedWidgets[item]
            let x = widget.offset_x, y = widget.offset_y, w = widget.width, h = widget.height;

            widget.left = x - w / 2;
            widget.top = y + h / 2;
            widget.right = x + w / 2;
            widgets.push(widget);
        }
        return widgets;
    }

    componentWillMount() {
        this.initTranslate();
    }

    align(e) {
        const {updateWidgets,setState}=this.props;
        const className = 'align-item';
        let target = $(e.target || e.srcElement);
        target = target.hasClass(className) ? target : target.parents("." + className);
        const type = target.attr('name');
        let rebuidWidgets = this.getEdgeWidget();
        switch (type) {
            case 'left':
                var widgets = rebuidWidgets.sort(function (a, b) {
                    return a.left - b.left
                });
                for (var i = 1; i < widgets.length; i++) {
                    let widget = widgets[i];
                    widget.offset_x = widgets[0].offset_x - (widgets[0].width - widget.width) / 2;
                    widget.history = true;
                    delete widget.left;
                    delete widget.top;
                    updateWidgets(widget)
                    setState({selectedWidget: widget});
                }
                break;
            case 'right':
                var widgets = rebuidWidgets.sort(function (a, b) {
                    return b.right - a.right
                });
                for (var i = 1; i < widgets.length; i++) {
                    var widget = widgets[i];
                    widget.offset_x = widgets[0].offset_x + (widgets[0].width - widget.width) / 2;
                    widget.history = true;
                    delete widget.left;
                    delete widget.top;

                    updateWidgets(widget)
                    setState({selectedWidget: widget});
                }
                break;
            case 'top':
                var widgets = rebuidWidgets.sort(function (a, b) {
                    return b.top - a.top
                });
                for (var i = 1; i < widgets.length; i++) {
                    var widget = widgets[i];
                    widget.offset_y = widgets[0].offset_y + (widgets[0].height - widget.height) / 2;
                    widget.history = true;
                    delete widget.left;
                    delete widget.top;

                    updateWidgets(widget)
                    setState({selectedWidget: widget});
                }
                break;
            case 'bottom':
                var widgets = rebuidWidgets.sort(function (a, b) {
                    return a.top - b.top
                });
                for (var i = 1; i < widgets.length; i++) {
                    var widget = widgets[i];
                    widget.offset_y = widgets[0].offset_y - (widgets[0].height - widget.height) / 2;
                    widget.history = true;
                    delete widget.left;
                    delete widget.top;
                    updateWidgets(widget)
                    setState({selectedWidget: widget});
                }
                break;
            case 'horizontal':
                var widgets = rebuidWidgets.sort(function (a, b) {
                    return a.offset_x - b.offset_x
                });
                for (var i = 1; i < widgets.length; i++) {
                    var widget = widgets[i];
                    widget.offset_x = widgets[0].offset_x;
                    widget.history = true;
                    delete widget.left;
                    delete widget.top;

                    updateWidgets(widget)
                    setState({selectedWidget: widget});
                }
                break;
            case 'vertical':
                var widgets = rebuidWidgets.sort(function (a, b) {
                    return a.offset_y - b.offset_y
                });
                for (var i = 1; i < widgets.length; i++) {
                    var widget = widgets[i];
                    widget.offset_y = widgets[0].offset_y;
                    widget.history = true;
                    delete widget.left;
                    delete widget.top;

                    updateWidgets(widget)
                    setState({selectedWidget: widget});
                }
                break;
            case 'Hinterval':
                var widgets = rebuidWidgets.sort(function (a, b) {
                    return a.offset_x - b.offset_x
                });
                var length = widgets.length;
                var distance = (widgets[length - 1].offset_x - widgets[0].offset_x) / (length - 1);
                for (var i = 1; i < widgets.length; i++) {
                    var widget = widgets[i];
                    widget.offset_x = widgets[0].offset_x + distance * i;
                    widget.history = true;
                    delete widget.left;
                    delete widget.top;

                    updateWidgets(widget)
                    setState({selectedWidget: widget});
                }
                break;
            case 'Vinterval':
                var widgets = rebuidWidgets.sort(function (a, b) {
                    return a.offset_y - b.offset_y
                });
                var length = widgets.length;
                var distance = (widgets[length - 1].offset_y - widgets[0].offset_y) / (length - 1);
                for (var i = 1; i < widgets.length; i++) {
                    var widget = widgets[i];
                    widget.offset_y = widgets[0].offset_y + distance * i;
                    widget.history = true;
                    delete widget.left;
                    delete widget.top;

                    updateWidgets(widget)
                    setState({selectedWidget: widget});
                }
                break;
        }
    }

    initTranslate() {
        this.alignHeader = $._("Alignment");
        this.leftAlign = $._('Left align');
        this.rightAlign = $._('Right align');
        this.topAlign = $._('Top align');
        this.bottomAlign = $._('Bottom align');
        this.horAlign = $._('Horizontal align');
        this.verAlign = $._('Vertical align');
        this.HorAlign = $._('Horizontal align interval');
        this.VerAlign = $._('Vertical align interval');
    }

    render() {
        return (
            <div className="align-property">
                <div className='header'>{this.alignHeader}</div>
                <ul className="align-group">
                    <li className="align-item" name='left' onClick={this.align}>
                        <div className="align-clickable">
                            <div className="icon-left"></div>
                        </div>
                        <span>{this.leftAlign}</span>
                    </li>
                    <li className="align-item" name='right' onClick={this.align}>
                        <div className="align-clickable">
                            <div className="icon-right"></div>
                        </div>
                        <span>{this.rightAlign}</span>
                    </li>
                    <li className="align-item" name='top' onClick={this.align}>
                        <div className="align-clickable">
                            <div className="icon-top"></div>
                        </div>
                        <span>{this.topAlign}</span>
                    </li>
                    <li className="align-item" name='bottom' onClick={this.align}>
                        <div className="align-clickable">
                            <div className="icon-bottom"></div>
                        </div>
                        <span>{this.bottomAlign}</span>
                    </li>
                    <li className="align-item" name='horizontal' onClick={this.align}>
                        <div className="align-clickable">
                            <div className="icon-horizontal"></div>
                        </div>
                        <span>{this.horAlign}</span>
                    </li>
                    <li className="align-item" name='vertical' onClick={this.align}>
                        <div className="align-clickable">
                            <div className="icon-vertical"></div>
                        </div>
                        <span>{this.verAlign}</span>
                    </li>
                    <li className="align-item align-item-a" name='Hinterval' onClick={this.align}>
                        <div className="align-clickable">
                            <div className="icon-Hinterval"></div>
                        </div>
                          <span>
                              {this.HorAlign}
                          </span>
                    </li>
                    <li className="align-item align-item-a" name='Vinterval' onClick={this.align}>
                        <div className="align-clickable">
                            <div className="icon-Vinterval"></div>
                        </div>
                          <span>
                              {this.VerAlign}
                          </span>
                    </li>
                </ul>
            </div>
        )
    }
}


const mapStateToProps = ({editor}) => {
    return editor;
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({...editorActions,...editorWidget}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(AlignmentProperty);
